<template>
	<view class="page">
		<navbar :showBack="true" :showMenu="false" :isDocument="true" bgc="#fff" iconColor="black">
			<view class="search">
				<u-search :placeholder="defaultSearch.showKeyword" v-model="searchValue" @search="search" @custom="search()" bg-color="#f7f7f7" height="60":show-action="true"></u-search>
			</view>
		</navbar>
		
		<view class="searchHistory">
			<text style="font-weight: bold;">历史</text>
			<scroll-view scroll-x="true" style="width: 550rpx;">
				<view class="scrollBox" :style="{ width: scrollWidth }">
					<text class="historyItem" @click="search2(item)" v-for="(item,index) in searchHistory" :key="index">{{item}}</text>
				</view>
			</scroll-view>
			<image src="/static/images/del.png" mode="widthFix" @click="delSearchHistory"></image>
		</view>
		
		<view class="hotSearch" :style="{ height: !showMore ? '480rpx' : '880rpx' }">
			<view class="hotHeader">
				<text style="font-weight: bold;">热搜榜</text>
			</view>
			<view class="hotList">
				<view class="hotListItem"  v-for="(item,index) in hotSearch" :key="index" @click="search2(item.searchWord)">
					<text :style="{ color : index < 3 ? '#ff3a3a' : '', marginRight: '20rpx' }">{{index + 1}}</text>
					<text :style="{ color : index < 3 ? '#000' : '', fontWeight: index < 3 ? 'bolder' : '' }">{{item.searchWord}}</text>
					<image :src="item.iconUrl ? item.iconUrl : ''" mode="heightFix"></image>
				</view>
			</view>
		</view>
		<view class="showMore" v-if="!showMore && hotSearch.length" @click="showMore = true">
			<text>展开更多热搜</text>
			<image src="/static/images/more-b.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import { mapState } from 'vuex'
	import { getHotSearch } from '@/api/search.js'
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				searchValue: '',
				searchHistory: [],
				scrollWidth: 0,
				hotSearch: [],
				// 查看更多热搜列表
				showMore: false
			}
		},
		onLoad() {
			getHotSearch().then(res => this.hotSearch = res.data)
		},
		onShow() {
			this.searchHistory = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : []
			this.getScrollWidth()
			console.log(this.defaultSearch)
		},
		computed: {
			...mapState(['defaultSearch'])
		},
		methods: {
			search() {
				if(this.searchValue == '2020年度听歌报告') {
					uni.navigateTo({
						url: `/components/webView?url=https://st.music.163.com/c/year2020/index.html?refer=search&full_screen=true&eid=`
					})
				} else {
					this.setSearchHistory()
					uni.navigateTo({
						url: `./searchResult?keyWord=${this.searchValue || this.defaultSearch.realkeyword}`
					})
				}
			},
			search2(keyWord) {
				this.searchValue = keyWord
				this.setSearchHistory()
				uni.navigateTo({
					url: `./searchResult?keyWord=${this.searchValue || this.defaultSearch.realkeyword}`
				})
			},
			// 每次搜索时修改搜索历史
			setSearchHistory() {
				let searchHistory = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : []
				let index = searchHistory.findIndex(item => item == this.searchValue || this.defaultSearch.realkeyword)
				if(index == -1) {
					searchHistory.unshift(this.searchValue || this.defaultSearch.realkeyword)
					uni.setStorageSync('searchHistory', searchHistory)
				} else {
					searchHistory.splice(index,1)
					searchHistory.unshift(this.searchValue || this.defaultSearch.realkeyword)
					uni.setStorageSync('searchHistory', searchHistory)
				}
			},
			// 计算搜索历史条的宽度
			getScrollWidth() {
				let charLength = 0
				this.searchHistory.forEach(item => charLength += item.length)
				this.scrollWidth = this.searchHistory.length * 56 + charLength * 24 + 'rpx'
			},
			// 删除搜索历史
			delSearchHistory() {
				this.searchHistory = []
				uni.removeStorageSync('searchHistory')
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background-color: #fff;
	}
	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	
		/deep/ input {
			font-size: 24rpx !important;
		}
	}
	
	.searchHistory {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		text {
			width: 80rpx;
		}
		image {
			width: 40rpx;
		}
		.scrollBox {
			height: 80rpx;
			line-height: 80rpx;
		}
		.historyItem {
			height: 30rpx;
			line-height: 30rpx;
			padding: 0 18rpx;
			margin: 0 10rpx;
			font-size: 24rpx;
			border-radius: 20rpx;
			background-color: #eee;
		}
	}
	
	.hotSearch {
		width: 750rpx;
		overflow: hidden;
		.hotHeader {
			width: 750rpx;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #ddd;
		}
		.hotList {
			display: inline-block;
			width: 750rpx;
			padding: 0 30rpx;
			.hotListItem {
				display: flex;
				align-items: center;
				float: left;
				width: 345rpx;
				height: 80rpx;
				text {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.showMore {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 60rpx;
		color: #aaa;
		font-size: 24rpx;
		image {
			width: 24rpx;
			margin-left: 6rpx;
		}
	}
</style>
